<template>
  <div class="buyShop">
    <div v-if="Object.keys(list).length !== 0">
      <div v-for="(item, index) in list" class="shop" :key="item.id">
        <check-button :isitem="item.checked" @click.native="checkClick(item)">
        </check-button>
        <div class="img">
          <img :src="item.image" alt="" />
        </div>
        <div class="shopInfo">
          <div class="title">{{ item.title }}</div>
          <p class="desc">商品描述：{{ item.desc }}</p>
          <div class="price">
            <span>￥{{ item.realprice }}</span>
            <span>×{{ item.cont }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="noShop">
      <h4>您还没添加商品，快去挑选吧！</h4>
    </div>
  </div>
</template>

<script>
import CheckButton from "components/content/checkbutton/CheckButton";

import { mapGetters } from "vuex";
export default {
  name: "CartList",
  data() {
    return {
      currentIndex: 0,
      isChecked: true,
    };
  },
  computed: {
    ...mapGetters({ Length: "cartLength", list: "cartList" }),
  },
  methods: {
    checkClick(item) {
      item.checked = !item.checked;//获取到商品checked值，每次点击时，取反checked
    },
  },
  components: {
    CheckButton,
  },
};
</script>

<style  scoped>
img {
  vertical-align: middle;
}
.shop p,
.shop div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buyShop{
  text-align: center;
}
.shop {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
}
.shop > div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 10%;
}
.shop > div:nth-child(2) {
  flex: 25%;
}
.shop > div:nth-child(3) {
  flex: 65%;
}
.img img {
  border-radius: 5px;
  width: 80px;
  height: 100px;
}
.shopInfo {
  padding: 0px 5px;
}
.shopInfo > div {
  margin: 10px 0px;
}
.shopInfo .desc {
  font-size: 14px;
  color: gray;
}
.price > span:first-child {
  float: left;
}
.price > span:last-child {
  float: right;
}
.active {
  background-color: rgb(255, 129, 152);
}
.noShop{
  position: relative;
  top: 100px;
}
</style>
